<template>
  <div class="modal" v-transfer-dom :data-transfer="transfer">
    <transition name="mask-fade">
      <div class="modal-mask" @click="maskClosable&&mask()" v-if="showModal&&maskShow"></div>
    </transition>
    <transition name="content-animate">
      <slot name="content"></slot>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
  import TransferDom from './transfer-dom'

  export default {
    name: 'Modal',
    directives: {TransferDom},
    props: {
      transfer: {
        type: Boolean,
        default: true
      },
      maskClosable: {
        type: Boolean,
        default: true
      },
      maskShow: {
        type: Boolean,
        default: true
      },
      showModal: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      close() {
        this.$emit('close', false)
      },
      mask(event) {
        this.close()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  .modal {
    .modal-mask {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      z-index: 1000;
      background-color: $color-background-l;
      &.mask-fade-enter-active, &.mask-fade-leave-active {
        transition: all .5s;
      }
      &.mask-fade-enter, &.mask-fade-leave-to {
        opacity: 0;
      }
    }
  }
</style>
